<div @drop.prevent="onDrop" @dragover.prevent="onDragover" @dragenter.prevent>
    <p class="basicInfo" style="position: relative;">
        公共文件
    </p>

    <div style="padding-left: 20px;margin-top: 0!important;">
        <el-row style="padding-left: 0!important;">
            <div class="d-flex j-sb a-center width100">
                <div class="d-flex a-center">
                    <el-button size="mini" type="primary" @click="uploadFileClick">上传文件</el-button>
                    <el-button size="mini" style="margin-left: 5px;"  type="primary" @click="createFolder">新建文件夹</el-button>
                    <el-button size="mini" style="margin-left: 5px;"  type="primary" @click="initPackPlugins">初始化打包插件</el-button>
                    <el-button size="mini" style="margin-left: 5px;"  type="primary" @click="settingJre">JAVA环境变量</el-button>
                    <el-button size="mini" style="margin-left: 5px;"  type="primary" @click="openCustomSignDialog">自定义签名</el-button>
                </div>
                <input ref="commonInput" style="display: none;" type="file" name="file" :multiple="true" :accept="accept" @change="handleChange">
            </div>
        </el-row>
        <el-row style="padding-left: 0!important;">
            <div class="d-flex j-sb a-center breadcrumbWrap" style="margin-top: 10px;margin-bottom: 10px;">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item v-for="(item, i) in breadcrumbList" :key="i" class="pointer textHover" :class="{'endBreadcrumb': i !== 0 && i === breadcrumbList.length - 1, 'hoverBreadcrumb': breadcrumbList.length > 1 && i !== breadcrumbList.length - 1 }">
                        <span @click="breadcrumbChange(item, i)">{{ item.label }}</span>
                    </el-breadcrumb-item>
                </el-breadcrumb>
                <span class="primary-text-color font-14 keep-all">共{{ fileList.length }}个</span>
            </div>
        </el-row>
        <el-row style="padding-left: 0!important;">
            <div class="d-flex a-center fileOperate primary-text-color pl-1">
                <el-tooltip class="item" v-if="copyFileList.length>0" effect="dark" :disabled="!copyFileNames" :content="copyFileNames" placement="top-start">
                    <span class="fileTips" >复制{{ copyFileList.length }}个文件(夹)</span>
                </el-tooltip>
                <el-tooltip class="item" v-else-if="moveFileList.length>0" effect="dark" :disabled="!allowMoveFileNames" :content="allowMoveFileNames" placement="top-start">
                    <span class="fileTips" >移动{{ allowMoveFileList.length }}个文件(夹)</span>
                </el-tooltip>
                <el-tooltip class="item" v-else="checkFileCount>0" effect="dark" :disabled="!checkFileNames" :content="checkFileNames" placement="top-start">
                    <span class="fileTips" >已选{{ checkFileCount }}个文件(夹)</span>
                </el-tooltip>
                <div class="operate d-flex a-center j-center">
                    <el-link v-if="checkFileCount>0" :underline="false" type="info" style="margin-left: 5px;" @click="operateFun('copy')">复制</el-link>
                    <el-link v-if="allowBatchOperateFile && checkFileCount>0" :underline="false" type="info" style="margin-left: 5px;" @click="operateFun('move')">移动</el-link>
                    <el-link v-if="allowBatchOperateFile && checkFileCount>0" :underline="false" type="info" style="margin-left: 5px;" @click="operateFun('remove')">删除</el-link>
                    <el-link v-if="copyFileList.length>0" :underline="false" type="info" style="margin-left: 5px;" @click="operateFun('paste')">粘贴到</el-link>
                    <el-link v-if="moveFileList.length>0" :underline="false" :disabled="!allowMoveFileList.length>0" type="info" style="margin-left: 5px;" @click="operateFun('moveTo')">移动到</el-link>
                    <el-link v-if="copyFileList.length>0 || moveFileList.length>0" :underline="false" type="info" style="margin-left: 5px;" @click="operateFun('cancel')">取消</el-link>
                </div>
            </div>
        </el-row>
        <el-row style="padding-left: 0!important;">
            <div class="fileTableList" v-loading="fileLoading">
                <div class="fileList-head d-flex a-center">
                    <div class="d-flex a-center fileName">
                        <el-checkbox v-model="checkAllFile" @change="checkAllFileChange" />
                        <span style="margin-left: 8px">文件名</span>
                    </div>
                    <div class="fileSize">文件大小</div>
                    <div class="lastUpdateTime">最后更新时间</div>
                    <div class="operate">操作</div>
                </div>
                <el-scrollbar class="right-scrollbar-wrap">
                    <div v-for="(item, index) in uploadFileList" :key="'upload'+index" class="fileList-head fileList-body d-flex a-center uploadFileHover">
                        <div class="d-flex a-center fileName">
                            <el-checkbox v-model="item.check" disabled />
                            <div class="fileNameWrap d-flex a-center flex-1">
                                <span class="mr-16 text-fileName mt-0">{{ item.fileName }}</span>
                            </div>
                        </div>
                        <span class="iconfont" @click.stop="cancelUpload(index)" style="cursor: pointer;">取消</span>
                        <el-progress :percentage="item.percentage" :stroke-width="3" />
                    </div>
                    <div v-for="(item,index) in fileList" :key="index" class="fileList-head fileList-body d-flex a-center">
                        <div class="d-flex a-center fileName">
                            <el-checkbox v-model="item.check" class="mr-5" @dblclick.stop.native :disabled="!allowCheckFile(item)"/>
                            <div class="fileNameWrap pointer d-flex a-center flex-1 mr-10" @dblclick="fileNameDbClick(item)" @click="fileClick(item)">
                                <span class="mr-10 white-noWrap ellipsis-1 text-fileName mt-0" :title="item.fileName">{{ item.fileName }}<span v-show="!item.isDirectory && item.fileType">.{{ item.fileType }}</span></span>
                            </div>
                        </div>
                        <div class="d-flex a-center fileSize">
                            <span>{{ calculateSize(item.fileSize) }}</span>
                        </div>
                        <div class="d-flex a-center lastUpdateTime">
                            <span>{{ item.lastUpdateTime }}</span>
                        </div>
                        <div class="operate d-flex a-center j-center">
                            <el-link v-show="!item.isDirectory" :underline="false" type="info" @click="downloadFile(item)">下载</el-link>
                            <el-link v-show="allowOperateFile(item) && item.isDirectory" style="margin-left: 5px;" :underline="false" type="info" @click="zipFile(item)">压缩</el-link>
                            <el-link v-show="allowOperateFile(item) && item.fileType==='zip'" style="margin-left: 5px;" :underline="false" type="info" @click="unZipFile(item)">解压</el-link>
                            <el-link v-show="allowOperateFile(item)" :underline="false" type="info" style="margin-left: 5px;" @click="reName(item)">重命名</el-link>
                            <el-link v-show="allowOperateFile(item)" :underline="false" type="info" style="margin-left: 5px;" @click="removeFile(item)">删除</el-link>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </el-row>
    </div>
    <el-dialog  :visible.sync="fileEditVisible" :title="navigatePath + '/' + fileEditorName" center :close-on-click-modal="false" width="100vw" height="100vh" custom-class="fileEditorDialog">
        <div id="fileEditor" style="height: 85vh;width: 100%;">
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" v-if="allowSaveFile"  @click.stop.native="saveFileEditorContent">
            保存
          </el-button>
          <el-button type="info" @click.stop.native="closeFileEditorDialog">
            关闭
          </el-button>
        </span>
    </el-dialog>
    <el-dialog  :visible.sync="customSignDialog" title="自定义签名" center :close-on-click-modal="false" width="70vw" height="40vh">
        <div style="height: 100%;width: 100%;">
            <el-form :model="keyStore" ref="keyStore" :rules="customSignRules" v-loading="generateSignLoading">
                <el-row>
                    <div class="width100 d-flex a-center">
                        <el-form-item label="证书文件路径:" prop="keyStoreFile" class="width100">
                            <el-input v-model="keyStore.keyStoreFile" placeholder="请输证书文件路径,例如zjh336.keystore"
                                      class="width100" />
                        </el-form-item>
                    </div>
                </el-row>
                <el-row>
                    <div class="width100 d-flex a-center">
                        <el-form-item label="密钥对别名:" prop="keyStoreAlias" class="width50" style="padding-right:20px;">
                            <el-input v-model="keyStore.keyStoreAlias" placeholder="请输入密钥对别名,例如zjh336"
                                      class="width100" />
                        </el-form-item>
                        <el-form-item label="密钥对有效期:" prop="keyStoreValidity" class="width50">
                            <el-input v-model="keyStore.keyStoreValidity" placeholder="请输入密钥对有效期(单位天),例如36500"
                                      class="width100" />
                        </el-form-item>
                    </div>
                </el-row>
                <el-row>
                    <div class="width100 d-flex a-center">
                        <el-form-item label="CN名称与姓氏:" prop="keyStoreDNameCN" class="width50" style="padding-right:20px;">
                            <el-input v-model="keyStore.keyStoreDNameCN" placeholder="请输入CN内容"
                                      class="width100" />
                        </el-form-item>
                        <el-form-item label="OU组织单位名称:" prop="keyStoreDNameOU" class="width50">
                            <el-input v-model="keyStore.keyStoreDNameOU" placeholder="请输入OU内容"
                                      class="width100" />
                        </el-form-item>
                    </div>
                </el-row>
                <el-row>
                    <div class="width100 d-flex a-center">
                        <el-form-item label="O组织名称:" prop="keyStoreDNameO" class="width50" style="padding-right:20px;">
                            <el-input v-model="keyStore.keyStoreDNameO" placeholder="请输入O内容"
                                      class="width100" />
                        </el-form-item>
                        <el-form-item label="L城市或区域名称:" prop="keyStoreDNameL" class="width50">
                            <el-input v-model="keyStore.keyStoreDNameL" placeholder="请输入L内容"
                                      class="width100" />
                        </el-form-item>
                    </div>
                </el-row>
                <el-row>
                    <div class="width100 d-flex a-center">
                        <el-form-item label="S省市自治区名称:" prop="keyStoreDNameS" class="width50" style="padding-right:20px;">
                            <el-input v-model="keyStore.keyStoreDNameS" placeholder="请输入S内容"
                                      class="width100" />
                        </el-form-item>
                        <el-form-item label="C国家或地区代码:" prop="keyStoreDNameC" class="width50">
                            <el-input v-model="keyStore.keyStoreDNameC" placeholder="请输入C内容"
                                      class="width100" />
                        </el-form-item>
                    </div>
                </el-row>
                <el-row>
                    <div class="width100 d-flex a-center">
                        <el-form-item label="密钥对密码:" prop="keyStoreAliasPwd" class="width50" style="padding-right:20px;">
                            <el-input v-model="keyStore.keyStoreAliasPwd" placeholder="请输入密钥对密码,例如zjh336"
                                      class="width100" />
                        </el-form-item>
                        <el-form-item label="密钥库密码:" prop="keyStorePwd" class="width50">
                            <el-input v-model="keyStore.keyStorePwd" placeholder="请输入密钥库密码,例如zjh336"
                                      class="width100" />
                        </el-form-item>
                    </div>
                </el-row>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click.stop.native="saveCustomSign">
            生成签名
          </el-button>
        </span>
    </el-dialog>
</div>